import React from 'react'
import Link from 'next/link'
function NavItems ({navs}) {
  return navs.map(e => {
    return <li key={e.name}><Link href={e.href || e.path}><a>{e.text}</a></Link></li>
  })
}

export default class Header extends React.Component {
  componentDidMount () {
    // console.log(this.props)
  }
  render () {
    return (
      <header className="navbar">
        <div className="main-container">
          <div className="nav-left"><Link href="/"><a><img src="https://cnodejs.org/public/images/cnodejs_light.svg" alt="logo" className="logo" /></a></Link></div>
          <div className="nav-right">
            <ul className="nav">
              <NavItems navs={this.props.navs} />
            </ul>
          </div>
        </div>
      </header>
    )
  }
}
